<template>
  <div class="father">
    <h4>我是父组件</h4>
    <h4>子组件传递给我的玩具是：{{ toy }}</h4>
    <ChildOfMitt />
  </div>
</template>

<script setup lang="ts">
import {ref, onUnmounted} from 'vue'
import emitter from '@/utils/emitter.ts'
import ChildOfMitt from "@/views/ChildOfMitt.vue";

let toy = ref('')

// 注册事件(订阅事件)， 第一个参数是定义的事件名称，第二参数是回调函数
// 如果有组件往这个订阅事件中发了数据，回调函数会执行，并且会接收到数据，就能处理接收到的消息了
emitter.on('custom-event', (data:any) => {
  console.log('父组件监听到了事件：', data)
  toy.value = data
})

onUnmounted(() => {
  // 准备解绑事件
  emitter.off('custom-event')
})

</script>

<style scoped>

</style>
